<template>
	<view>
	<view>
		<!--  @blur="blur"  :focus="true"  @focus="focus"-->
			<uni-search-bar @confirm="search"  v-model="searchValue" @input="input" @cancel="cancel" @clear="clear" placeholder="请输入搜索内容">
			</uni-search-bar>
			<!-- <view class="search-result">
				<text class="search-result-text">当前输入为：{{ searchValue }}</text>
			</view> -->
	</view>
	<!-- ========================== -->
	<view class="warp">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper class="swiper" :indicator-dots="true" border-radius="20px">
					<swiper-item>
						<uni-grid :column="3" :highlight="true" @change="change">
							<uni-grid-item v-for="(item, index) in list"  :index="index" :key="index">
								<view class="grid-item-box">
									<image :src="item.url" class="image" mode="aspectFill"  style="width: 35px; height: 35px;"/>
									<text class="text">{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
		
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchValue: '',
				dynamicList: [],
				list: [{
						url: '/static/logo/monney.png', //666 上传图片
						text: '渠道上游预付款申请',
						url_address:"pages/chUpsAdPa",
						type: "primary"
					},
					{
						url: '/static/logo/monney.png',  //666 上传图片
						text: '渠道下游预付款加款申请',
						url_address:"pages/chDosAdpa",
					},
					{
						url: '/static/logo/card-copy.png', //666 上传图片
						text: '上游卡密付款申请',
						url_address:"pages/upCarPaymentRequest",
					},
					{
						url: '/static/logo/dianzi.png',
						text: '项目垫资申请',
						url_address:"pages/proFundingRequest",
					},
					{
						url: '/static/logo/yufukuan.png',
						text: '执行项目预付申请',
						url_address:"pages/exAdvanceRequest",
					},
					{ 
						url: '/static/logo/yufukuan.png',
						text: '测试单1',
						url_address:"pages/test",
					}
				]
			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				// uni.showToast({
				// 	title: 'blur事件，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			focus(e) {
				// uni.showToast({
				// 	title: 'focus事件，输出值为：' + e.value,
				// 	icon: 'none'
				// })
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
				change(e) {
							let {
								index
							} = e.detail
							// this.list[index].url_address
							uni.navigateTo({
								url: this.list[index].url_address,
							})
						},									
					
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>
<style lang="scss">

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color:#666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	// #ifdef H5
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}	
	// #endif
</style>


